import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'
import { lifecycle, OPProvider } from '@ones-op/bridge'
import './index.css'
import { Button, ConfigProvider, Modal } from '@ones-design/core'
import { useUserInfo } from '@ones-op/store'

function App() {
  const [value, setValue] = useState('')
  useEffect(() => {
    setValue(window.localStorage.getItem('global-banner-value') || '')
  }, [])
  const [isModalVisible, setIsModalVisible] = useState(false)
  const { name } = useUserInfo()
  return (
    <div style={{ padding: '24px' }}>
      <div style={{ fontSize: '18px', fontWeight: 600 }}>系统顶部栏安全提示语</div>
      <p style={{ fontSize: '12px', color: '#999', margin: '8px 0' }}>最多可输入200个字</p>
      <input
        type="text"
        value={value}
        onChange={(e) => {
          setValue(e.target.value)
        }}
        maxLength={200}
        style={{ border: '1px solid #aaa', height: '32px', width: '500px', padding: '4px 6px' }}
      />
      <div style={{ marginTop: '12px', display: 'flex', alignItems: 'center', gap: '12px' }}>
        <Button
          disabled={!value}
          onClick={() => {
            if (value) {
              window.postMessage(value, '*')
            }
          }}
          type="primary"
        >
          保存
        </Button>

        <Button
          type="primary"
          onClick={() => {
            setIsModalVisible(true)
          }}
        >
          Hello world
        </Button>
      </div>
      <Modal
        title="modal 对话框"
        visible={isModalVisible}
        onCancel={() => {
          setIsModalVisible(false)
        }}
        onOk={() => {
          setIsModalVisible(false)
        }}
      >
        <p>Hello {name}</p>
      </Modal>
    </div>
  )
}

ReactDOM.render(
  <ConfigProvider>
    <OPProvider>
      <App />
    </OPProvider>
  </ConfigProvider>,
  document.getElementById('ones-mf-root')
)

lifecycle.onDestroy(() => {
  ReactDOM.unmountComponentAtNode(document.getElementById('ones-mf-root'))
})
